<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0 minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>问卷预览</title>
    <link href="public/css/header.css" rel="stylesheet" type="text/css">
    <link href="public/css/container.css" rel="stylesheet" type="text/css">
    <script src="../public/jQuery/jQuery-2.1.3.min.js"></script>
    <script src="../public/js/publicjs.js"></script>
    <script src="../public/js/extend.js"></script>
    <script src="public/js/myjs/whole.js"></script>


    <script src="mobiscroll/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>

    <script src="mobiscroll/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>

    <link href="mobiscroll/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css"/>
    <link href="mobiscroll/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css"/>
    <script src="mobiscroll/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
    <script src="mobiscroll/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>

    <link href="public/css/answer.css" rel="stylesheet" type="text/css"/>
    <style>

    </style>
</head>
<body>

<header>
    <div class="header__box tl">

        <img onclick="goback()" src="public/img/basic/back.png"/>
        <span onclick="goback()" class="back">返回</span>

    </div>
    <div class="header__box tc header__box__title">
        预览
    </div>
    <div class="pop-up">
    </div>
</header>

<div class="call_back">
    <div class="pop">
        <div class="publish_loading_div_l">
            <img style="width: 10vw;height: 10vw;" src='public/img/basic/loading.gif'>
        </div>
        <div class="publish_loading_div_r">
            正在发布问卷
        </div>
    </div>
</div>

<section>

    <div class="text_no_more">
        <img class="loading" src='public/img/basic/loading.gif'>
    </div>
    <div id="content">

    </div>

    <div class="previewbtn">
        <span>
            当前预览页面，正式发布请点击发布按钮
        </span>
    </div>
    <div class="btnPublish">
        <span>
            发布
        </span>
    </div>

    <div class="moreDiv" style="width: 100%;height: 43vh;display: none;">

    </div>

    <input type="hidden" id="questionnaire_id"/>
    <input type="hidden" id="questionnaire_name"/>
</section>

</body>
</html>
<script>

    $(function () {
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        };

        var questionnaire_id = $.getUrlParam('questionnaire_id');
        API_Func('/questionnaires/' + questionnaire_id, "GET", {id: questionnaire_id}, true, function () {

        }, function (d) {
            var data = d.data;

            console.log(data);
            if (d.code == 0) {
                var html = "";
                html += '<div class="content_title"><span class="content_title_span">' + data.questionnaire_name +
                        '</span>' +
                        '</div>' +
                        '<div class="content_welcome">' +
                        '<span class="content_welcome_span">' + data.questionnaire_welcome +
                        '</span>' +
                        '</div>';
                for (var i = 0; i < data.questions.length; i++) {

                    //循环题目


                    //单选题
                    if (data.questions[i].question_type == 0) {
                        html += '<div class="content_question" data-question_id="' + data.questions[i].question_id + '" data-type="0">' +
                                '<div class="content_question_title bg_323232">' + data.questions[i].question_body +
                                '</div>' +
                                '<div class="content_question_title_ness bg_FF4C4C">';
                        if (data.questions[i].is_necessary == 1) {
                            html += '*';
                        }
                        html += '</div>' +
                                '<div style="clear: both;">' +

                                '</div>';
                        //图片
                        var question_img = data.questions[i].question_img.split(',');
                        html += ' <div style="position: relative;width: 100%;text-align: center;">';

                        for (var k = 0; k < question_img.length; k++) {
                            if (question_img[k] != "") {
                                html += '<img class="preview_img" src="' + question_img[k] + '">';
                            }

                        }

                        html += '</div>';

                        html += '<ul class="single">';

                        //单项选项遍历
                        var question_options = data.questions[i].question_options.split(',');
                        for (var j = 0; j < question_options.length; j++) {
                            html += '<li>' +
                                    '<div class="option">' +
                                    '<img data-select_true="0" src="public/img/preview/ellipse.png" />' +
                                    '</div>' +

                                    '<div class="text_div_option">' + question_options[j]
                                    +
                                    '</div>' +
                                    '<div style="clear: both;">' +

                                    '</div>' +
                                    '</li>';
                        }
                        html += '</ul>' +
                                '</div>';
                    }

                    //多选题
                    else if (data.questions[i].question_type == 1) {
                        html +=
                                '<div class="content_question" data-question_id="' + data.questions[i].question_id + '" data-type="1">' +
                                '<div class="content_question_title bg_323232">' + data.questions[i].question_body +
                                '</div>' +
                                '<div class="content_question_title_ness bg_FF4C4C">';
                        if (data.questions[i].is_necessary == 1) {
                            html += '*';
                        }
                        if (data.questions[i].select_limit == 0) {
                            html += '<span class="bg_323232">(不限制选项个数)</span>';

                        }
                        else {
                            html += '<span class="bg_323232">(最多选' + data.questions[i].select_limit + '个)</span>';
                        }

                        html += '</div>' +
                                '<div style="clear: both;">' +

                                '</div>';
                        var question_img = data.questions[i].question_img.split(',');

                        html += ' <div style="position: relative;width: 100%;text-align: center;">';

                        for (var k = 0; k < question_img.length; k++) {
                            if (question_img[k] != "") {
                                html += '<img class="preview_img" src="' + question_img[k] + '">';
                            }
                        }

                        html += '</div>';
                        html += '<ul class="multiple" data-select_limit="' + data.questions[i].select_limit + '" data-select_count=0>';

                        //单项选项遍历
                        var question_options = data.questions[i].question_options.split(',');
                        for (var j = 0; j < question_options.length; j++) {

                            html += '<li>' +
                                    '<div class="option">' +
                                    '<img data-select_true="0" src="public/img/preview/checkbox_no_select.png" />' +
                                    '</div>' +

                                    '<div class="text_div_option">' + question_options[j] +
                                    '</div>' +
                                    '<div style="clear: both;">' +

                                    '</div>' +
                                    '</li>';

                        }

                        html += '</ul>' +
                                '</div>';
                    }

                    //填空题
                    else if (data.questions[i].question_type == 2) {
                        html += '<div class="content_question" data-question_id="' + data.questions[i].question_id + '" data-type="2">' +
                                '<div class="content_question_title bg_323232">' + data.questions[i].question_body +
                                '</div>' +
                                '<div class="content_question_title_ness bg_FF4C4C">';

                        if (data.questions[i].is_necessary == 1) {
                            html += '*';
                        }

                        html += '</div>' +
                                '<div style="clear: both;">' +
                                '</div>';
                        var question_img = data.questions[i].question_img.split(',');
                        html += ' <div style="position: relative;width: 100%;text-align: center;">';

                        for (var k = 0; k < question_img.length; k++) {
                            if (question_img[k] != "") {
                                html += '<img class="preview_img" src="' + question_img[k] + '">';
                            }
                        }

                        html += '</div>';
                        html += '<div class="grade">' +
                                '<textarea class="desc" rows="' + data.questions[i].rows + '"></textarea>' +
                                '</div>' +
                                '</div>';
                    }

                    //打分题
                    else if (data.questions[i].question_type == 3) {
                        html += ' <div class="content_question" data-question_id="' + data.questions[i].question_id + '" data-type="3">' +
                                '<div class="content_question_title bg_323232">' + data.questions[i].question_body +
                                '</div>' +
                                '<div class="content_question_title_ness bg_FF4C4C">';

                        if (data.questions[i].is_necessary == 1) {
                            html += '*';
                        }

                        html += '</div>' +
                                '<div style="clear: both;">' +

                                '</div>';
                        var question_img = data.questions[i].question_img.split(',');
                        html += ' <div style="position: relative;width: 100%;text-align: center;">';

                        for (var k = 0; k < question_img.length; k++) {
                            if (question_img[k] != "") {
                                html += '<img class="preview_img" src="' + question_img[k] + '">';
                            }
                        }

                        html += '</div>';
                        html += '<div style="color: #808080;position: relative;font-size: 2vh;">' +
                                '<span>' +
                                '请打分 (满分' + data.questions[i].mark_limit + '分)' +
                                '</span>' +
                                '</div>' +
                                '<div class="score" data-score="0">';

                        for (var j = 0; j < data.questions[i].mark_limit; j++) {
                            html += '<div>' +
                                    '<img class="score_img" src="public/img/preview/score_no_select.png" />' +
                                    '</div>';
                        }

                        html += '</div>' +
                                '</div>';
                    }
                    //日期题
                    else if (data.questions[i].question_type == 4) {
                        html += '<div class="content_question" data-question_id="' + data.questions[i].question_id + '" data-type="4">' +
                                '<div class="content_question_title bg_323232">' + data.questions[i].question_body +
                                '</div>' +
                                '<div class="content_question_title_ness bg_FF4C4C">';
                        if (data.questions[i].is_necessary == 1) {
                            html += '*';
                        }
                        html += '</div>' +
                                '<div style="clear: both;">' +

                                '</div>';
                        var question_img = data.questions[i].question_img.split(',');

                        html += ' <div style="position: relative;width: 100%;text-align: center;">';

                        for (var k = 0; k < question_img.length; k++) {
                            if (question_img[k] != "") {
                                html += '<img class="preview_img" src="' + question_img[k] + '">';
                            }
                        }

                        html += '</div>';
                        html += '<div class="date">' +
                                '<div class="date_input">' +
                                '<input readonly="readonly" type="text" placeholder="请选择"/>' +
                                '</div>' +
                                '<div class="date_img">' +
                                '<img class="date_show" src="public/img/preview/date.png" />' +
                                '</div>' +
                                '</div>' +
                                '</div>';
                    }

                    //时间题
                    else if (data.questions[i].question_type == 5) {
                        html += ' <div class="content_question" data-question_id="' + data.questions[i].question_id + '" data-type="5">' +
                                '<div class="content_question_title bg_323232">' + data.questions[i].question_body +
                                '</div>' +
                                '<div class="content_question_title_ness bg_FF4C4C">';
                        if (data.questions[i].is_necessary == 1) {
                            html += '*';
                        }

                        html += '</div>' +
                                '<div style="clear: both;">' +

                                '</div>';
                        var question_img = data.questions[i].question_img.split(',');
                        html += ' <div style="position: relative;width: 100%;text-align: center;">';

                        for (var k = 0; k < question_img.length; k++) {
                            if (question_img[k] != "") {
                                html += '<img class="preview_img" src="' + question_img[k] + '">';
                            }
                        }

                        html += '</div>';
                        html += '<div class="time">' +
                                '<div class="time_input">' +
                                '<input readonly="readonly" type="text" placeholder="请选择"/>' +
                                '</div>' +
                                '<div class="time_img">' +
                                '<img class="time_show" src="public/img/preview/time.png" />' +
                                '</div>' +
                                '</div>' +
                                '</div>';
                    }
                }

                $("#questionnaire_id").val(data.questionnaire_id);
                $("#questionnaire_name").val(data.questionnaire_name);

                //添加标签
                $("#content").append(html);
                //加载消失
                $(".text_no_more").css('display', 'none');

                //单选操作
                $('.content_question .single .option img').on('click', function () {
                    $(this).parents('li').siblings().find('img').attr('src', 'public/img/preview/ellipse.png');
                    $(this).parents('li').siblings().find('img').attr('data-select_true', 0);
                    $(this).attr('src', 'public/img/preview/ellipse2.png');
                    $(this).attr('data-select_true', 1);
                });

                //多选操作
                $('.content_question .multiple .option img').on('click', function () {
                    var _self = $(this);
                    //最多选择
                    var select_limit = _self.parents('.multiple').attr('data-select_limit').trim();
                    var select_count = _self.parents('.multiple').attr('data-select_count').trim();

                    //判断它是否之前被选中过
                    var selete_true = _self.attr('data-select_true');

                    //如果之前没有选中过
                    if (selete_true == 0) {
                        select_count = parseInt(select_count) + 1;

                        if (select_count > select_limit && select_limit != 0) {

                            pop_up_fn($('.pop-up'), '最多只能选' + select_limit + '个')
                        }
                        else {
                            _self.parents('.multiple').attr('data-select_count', select_count);
                            _self.attr('data-select_true', 1);
                            _self.attr('src', 'public/img/preview/checkbox_select.png');
                        }
                    }
                    //如果之前没有选中过
                    else {
                        select_count = parseInt(select_count) - 1;
                        _self.parents('.multiple').attr('data-select_count', select_count);
                        _self.attr('data-select_true', 0);
                        _self.attr('src', 'public/img/preview/checkbox_no_select.png');
                    }
                });

                //打分题
                $('.content_question .score img').on('click', function () {
                    var _self = $(this);
                    _self.attr('src', 'public/img/preview/score_select.png');
                    _self.parent().prevAll().children('img').attr('src', 'public/img/preview/score_select.png');
                    _self.parent().nextAll().children('img').attr('src', 'public/img/preview/score_no_select.png');

                    var score_count = 0;
                    score_count = score_count + 1 + _self.parent().prevAll().length;
                    _self.parents('.score').attr('data-score', score_count);

                });

                selectDate($(".content_question .date .date_input input"));
                selectTime($(".content_question .time .time_input input"));

                $('.date_show').on('click', function () {
                    $(this).parents('.date').find('input').trigger("focus");
                });

                $('.time_show').on('click', function () {
                    $(this).parents('.time').find('input').trigger("focus");
                })
            }
        });

    });


    //选择时间
    function selectDate(obj) {
        var currYear = (new Date()).getFullYear();
        var opt = {};
        opt.date = {preset: 'date'};
        opt.datetime = {preset: 'datetime'};
        opt.time = {preset: 'time'};
        opt.default = {
            theme: 'sense-ui', //皮肤样式
            display: 'bottom', //显示方式
            mode: 'scroller', //日期选择模式
            lang: 'zh',
            startYear: currYear - 10, //开始年份
            endYear: currYear + 10, //结束年份

        };
        var optDateTime = $.extend(opt['datetime'], opt['default']);
        //var optTime = $.extend(opt['time'], opt['default']);
//            $(".ApptDate").mobiscroll(optDateTime).time(optDateTime);
//            $(".ApptDate").mobiscroll(optDateTime).datetime(optDateTime);
        obj.mobiscroll(optDateTime).date(optDateTime);
//        $(".content_question .time .time_input input").mobiscroll(optDateTime).time(optDateTime);
    }

    function selectTime(obj) {
        var currYear = (new Date()).getFullYear();
        var opt = {};
        opt.date = {preset: 'date'};
        opt.datetime = {preset: 'datetime'};
        opt.time = {preset: 'time'};
        opt.default = {
            theme: 'sense-ui', //皮肤样式
            display: 'bottom', //显示方式
            mode: 'scroller', //日期选择模式
            lang: 'zh',
            startYear: currYear - 10, //开始年份
            endYear: currYear + 10 //结束年份
        };
        var optDateTime = $.extend(opt['datetime'], opt['default']);
        //var optTime = $.extend(opt['time'], opt['default']);
//            $(".ApptDate").mobiscroll(optDateTime).time(optDateTime);
//            $(".ApptDate").mobiscroll(optDateTime).datetime(optDateTime);
//        $(".content_question .date .date_input input").mobiscroll(optDateTime).date(optDateTime);
        obj.mobiscroll(optDateTime).time(optDateTime);
    }

    //发布
    $('.btnPublish').on('click', function () {

        var questionnaire_id = $("#questionnaire_id").val();
        var questionnaire_name = $("#questionnaire_name").val();

        API_Func('/questionnaires/publish/' + questionnaire_id, 'PUT', false, {}, function () {

            $('.call_back').css('display', "block");

        }, function (d) {
            if (d.code == 0) {
                $('.call_back').css('display', "none");
                location.href = 'answer.html?questionnaire_id=' + questionnaire_id;
//                shareContent("",group_id,questionnaire_name,questionnaire_name,"",3,"","/questionnaire/answer.html?questionnaire_id="+questionnaire_id+"&group_id="+group_id)

            }
            else {
                $('.call_back').css('display', "none");
            }
        }, function (d) {
            $('.call_back').css('display', "none");
        });


    });

    //键盘事件
    $(document).on('focus', '.desc', function (e) {

        $(".moreDiv").show();

        //文本框所在的div
        var documentHeight = $("#content").outerHeight(true) + $(".btnPublish").outerHeight(true);  //整个html高度
        console.log(documentHeight);
        var windownHeight = $(window).height();  //屏幕高度

//        var divHeight = $(".first-div").outerHeight(true) + $(".second-div").outerHeight(true) + $(".third-div").outerHeight(true); //键盘升起需要高于键盘的div总高度
        var divHeight1 = $(".content_title").outerHeight(true) + $(".content_welcome").outerHeight(true) + $(this).parents('.content_question').outerHeight(true);
        var divHeight2 = 0;
        $(this).parents('.content_question').prevAll().each(function () {
            divHeight2 += $(this).outerHeight(true);
        });
        var divHeight = divHeight1 + divHeight2;
        console.log(divHeight);

        var keyboardHeight = windownHeight / 2;  //半屏
        var scrollHeight = divHeight + keyboardHeight - windownHeight;

        if (divHeight > windownHeight / 2) {
            //需要滑动
            var canScrollHeight = documentHeight - windownHeight;
//            console.log(canScrollHeight);
            if (canScrollHeight < scrollHeight) {
                //滑动距离不够
                var moreheight = (scrollHeight - canScrollHeight) / windownHeight * 100 + 'vh';
//                console.log(moreheight);
//                $("#content").append('<div class="moreDiv" style="width: 100%;height: ' + moreheight + '"></div>');
            }

            window.scrollTo(0, scrollHeight);
        }
    });
    $(document).on('onblur', '.desc', function (e) {
        $("#moreDiv").css('display', 'none');
    });

    //查看大图
    $(document).on('click', '.preview_img', function () {
        $.watchBigPic($(this));
    });

//    $(document).on('click', '.preview_img', function () {
//
//        $('.big_img').remove();
//        var img_src = $(this).attr('src');
//
//        var call_back = document.createElement('div');
//        call_back.setAttribute('class', 'img_back');
//        call_back.style.position = 'fixed';
//        call_back.style.left = 0;
//        call_back.style.top = '7.8125vh';
//        call_back.style.marginLeft = 'auto';
//        call_back.style.marginRight = 'auto';
//        call_back.style.overflow = 'auto';
//        call_back.style.zIndex = '9999';
//        call_back.style.width = '100vw';
//        call_back.style.height = '92.1875vh';
//        call_back.style.textAlign = 'center';
//        call_back.style.background = 'rgba(0, 0, 0, 0.8)';
//
//        var img = document.createElement('img');
//        img.src = img_src;
//        img.setAttribute('class', 'big_img');
//        img.style.marginLeft = 'auto';
//        img.style.marginRight = 'auto';
////        img.style.marginTop = '7.8125vh';
//
//        call_back.appendChild(img);
//        document.documentElement.appendChild(call_back);
//
//        $('.big_img').css('width','100%');
//        $('.big_img').css('height', '100%');
////        var width = $('.big_img').css('width');
////        var height = $('.big_img').css('height');
////        var ht = parseInt(height.split("px")[0]);
////        var wd = parseInt(width.split("px")[0]);
//
////        $('.big_img').css('width', wd / 10.8 + 'vw');
//////        $('.big_img').css('width', width);
////        $('.big_img').css('height', ht / 19.2 + 'vh');
//////        $('.big_img').css('height', height);
////
////        if (ht / 19.2 < 100) {
////            $('.big_img').css("marginTop", (92.1875 - ht / 19.2) / 2 + "vh");
////        }
//
//
////        $('.big_img').css('width', wd / 10.8 + 'vw');
//////        $('.big_img').css('width', width);
////        $('.big_img').css('height', ht / 19.2 + 'vh');
////        $('.big_img').css('height', height);
//
////        if (ht / 19.2 < 100) {
////            $('.big_img').css("marginTop", (92.1875 - ht / 19.2) / 2 + "vh");
////        }
//
//        //点击移除隐藏
//        $('.img_back').on('click', function () {
//            $(this).remove();
//        });
//
////        alert($('.big_img').css('width'));
//
//    });

</script>